window.onload = function () {

    var regTel = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/   //手机号码
    var regMail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/       //邮箱
    var regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/       //身份证
    var regPwd = /^[a-zA-Z0-9_]{6,16}$/   //密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
    var regUsername = /^[a-zA-Z][a-zA-Z0-9_]{5,16}$/        //帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
    var regDate = /^\d{4}-\d{1,2}-\d{1,2}/        //日期
    var regYear = /(01～09和1～12)：^(0?[1-9]|1[0-2])$/          //一年的12个月
    var regMouth = /(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$/       //一个月的31天
    var regQq = /[1-9][0-9]{4,}/            //QQ


    // 手机号码验证
    function regphone1(ele, reg) {
        if (ele.value == '') {
            ele.nextElementSibling.innerHTML = ' 请填写真实的手机号'
            ele.nextElementSibling.className = ''
        }
    }

    function regphone2(ele, reg) {
        if (reg.test(ele.value)) {
            ele.nextElementSibling.className = 'green'
            ele.nextElementSibling.innerHTML = ' 输入正确'
            ele.setAttribute("items", "true")
        } else if (ele.value == '') {
            ele.nextElementSibling.innerHTML = ' 请填写真实的手机号'
            ele.nextElementSibling.className = ''
            ele.nextElementSibling.style.display = 'none'
            ele.setAttribute("items", "false")
        } else {
            ele.nextElementSibling.className = 'red'
            ele.nextElementSibling.innerHTML = ' 格式输入错误'
            ele.setAttribute("items", "false")
        }

    }

    // 用户名验证
    function reguser1(ele, reg) {
        if (ele.value == '') {
            ele.nextElementSibling.innerHTML = '字母开头,支持数字/字母/下划线  允许5-16字符'
            ele.nextElementSibling.className = ''
        }
    }

    function reguser2(ele, reg) {

        if (reg.test(ele.value)) {
            ele.nextElementSibling.className = 'green'
            ele.nextElementSibling.innerHTML = ' 输入正确'
            ele.setAttribute("items", "true")
        } else if (ele.value == '') {
            ele.nextElementSibling.innerHTML = ' 字母开头,支持数字/字母/下划线  允许5-16字符'
            ele.nextElementSibling.className = ''
            ele.nextElementSibling.style.display = 'none'
            ele.setAttribute("items", "false")
        } else {
            ele.nextElementSibling.className = 'red'
            ele.nextElementSibling.innerHTML = ' 格式输入错误'
            ele.setAttribute("items", "false")
        }
    }

    // 密码验证
    function regpwd1(ele, reg) {
        if (ele.value == '') {
            ele.nextElementSibling.innerHTML = '长度在6~18之间，只能包含字母、数字和下划线'
            ele.nextElementSibling.className = ''
        }
    }

    function regpwd2(ele, reg) {

        if (reg.test(ele.value)) {
            ele.nextElementSibling.className = 'green'
            ele.nextElementSibling.innerHTML = ' 输入正确'
            ele.setAttribute("items", "true")
        } else if (ele.value == '') {
            ele.nextElementSibling.innerHTML = '长度在6~18之间，只能包含字母、数字和下划线'
            ele.nextElementSibling.className = ''
            ele.nextElementSibling.style.display = 'none'
            ele.setAttribute("items", "false")
        } else {
            ele.nextElementSibling.className = 'red'
            ele.nextElementSibling.innerHTML = ' 格式输入错误'
            ele.setAttribute("items", "false")
        }

    }

    $(function () {

        // 手机号验证
        $('#phone').on('input propertychange', function () {
            regphone1($(this)[0], regTel)
        })
        $('#phone').focus(function () {
            $(this).next().show()
        }).blur(function () {

            if (getCookie('vancelusers' + $(this).val())) {
                let objss = JSON.parse(getCookie('vancelusers' + $(this).val()));
                if ($(this).val() == objss.phone) {
                    $(this).next().text('手机号码已存在').addClass('red')
                    return
                } else {
                    $(this).next().text('输入正确').addClass('grenn')
                }
            } else {
                regphone2($(this)[0], regTel)

            }
            agreebtn()
        })


        // 用户名验证
        $('#name').on('input propertychange', function () {
            reguser1($(this)[0], regUsername)
        })
        $('#name').focus(function () {
            $(this).next().show()
        }).blur(function () {


            if (getCookie('vancelusers' + $(this).val())) {
                let objss = JSON.parse(getCookie('vancelusers' + $(this).val()));
                if ($(this).val() == objss.name) {
                    $(this).next().text('用户名已存在').addClass('red')
                    return
                } else {
                    $(this).next().text('输入正确').addClass('grenn')
                }
            } else {
                reguser2($(this)[0], regUsername)
            }
            agreebtn()

        })



        // 同意复选框状态
        function agreebtn() {
            if ($('.form .checkbox').prevAll().children('input').attr('items') != 'true') {
                $('.checkbox input').attr('disabled', 'disabled')
                $('.form button').css({
                    background: '#9a9a9a'
                }).prop("disabled", true)
                $('.checkbox input').removeAttr('checked')
            } else {
                $('.checkbox input').removeAttr('disabled')

            }
        }




        //密码验证
        $('#pwd').on('input propertychange', function () {
            regpwd1($(this)[0], regPwd)
        })
        $('#pwd').focus(function () {
            $(this).next().show()
        }).blur(function () {
            regpwd2($(this)[0], regPwd)
            agreebtn()
        })

        //密码二次验证        
        $('#pwds').focus(function () {
            $(this).siblings().text('请再次输入上面的密码').removeClass('red')
            $(this).siblings().show()

        }).blur(function () {

            if ($(this).val() != $('#pwd').val()) {
                $(this).attr('items', 'flase')
                $(this).siblings().show().text('两次输入的结果不一样').addClass('red')

            } else if ($(this).val() == '') {
                $(this).siblings().hide()
                $(this).attr('items', 'false')
            } else if ($(this).val() == $('#pwd').val()) {
                $(this).siblings().hide()
                $(this).attr('items', 'true')
            }

            agreebtn()
        })

    })



    // cookie操作开始

    function getCookieAll() {
        var res = {}

        var strCookie = document.cookie;
        var arr = strCookie.split('; ')
        for (var i = 0; i < arr.length; i++) {
            var List = arr[i].split('=');
            var key = List[0]
            var val = List[1]
            res[key] = val
        }
        return res
    }

    function getCookie(key) {
        var obj = getCookieAll()
        return obj[key]
    }

    function setCookie(key, val, days, path, domain, secure) {
        var strCookie = ''
        if (key) {
            strCookie += key + '=' + val + ';'
        }
        if (typeof (days) == 'number') {
            var date = new Date()
            date.setDate(date.getDate() + days)
            strCookie += 'expires=' + date + ';'
        }
        if (path) {
            strCookie += 'path=' + path + ';'
        }
        if (domain) {
            strCookie += 'domain=' + domain + ';'
        }
        if (secure) {
            strCookie += 'secure'
        }
        return document.cookie = strCookie
    }


    // cookie操作结束


    // 表单提交


    var oForm = document.forms[0]

    $('.checkbox input').change(function () {
        if ($('.checkbox input').prop('checked')) {
            $('.form button').css({
                background: '#B52024'
            }).prop("disabled", false);

        } else {
            $('.form button').css({
                background: '#9a9a9a'
            }).prop("disabled", true);
        }
    })



    // 表单提交
    oForm.onsubmit = function () {

        var obj = {
            phone: this.uphone.value.trim(),
            name: this.uname.value.trim(),
            pwd: this.upwd.value.trim(),
        }

        if ($('#phone').attr('items') != 'true' && $('#name').attr('items') != 'true' && $('#pwd').attr('items') != 'true' && ('#pwds').attr('items') != 'true') {

            return false

        } else {
            if (this.box.checked) {
                setCookie("vancelusers" + obj.phone, JSON.stringify(obj), 10)
                setCookie("vancelusers" + obj.name, JSON.stringify(obj), 10)
                return true
            }
        }


    }


}







